// 日志管理模块

import * as React from 'react'
import { useState, useEffect } from 'react'
import moment from 'moment'
import apis from '@/apis'
import './index.scss'
import { Button, Form, DatePicker, Table, Spin, Tooltip } from 'antd'
import { http } from '@/lib'

const { RangePicker } = DatePicker

const DailyRecordControl = props => {
  const fatherTableTitleStyle = {} as any

  const columns = [
    {
      title: <span style={fatherTableTitleStyle}>操作</span>,
      dataIndex: 'operationType',
      key: 'operationType',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>操作端</span>,
      dataIndex: 'operationWay',
      key: 'operationWay',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>操作账号</span>,
      dataIndex: 'operationAccount',
      key: 'operationAccount',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>操作人</span>,
      dataIndex: 'operationName',
      key: 'operationName',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>用户ID</span>,
      dataIndex: 'userId',
      key: 'userId',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>是否成功登录</span>,
      dataIndex: 'loginMessage',
      key: 'loginMessage',
      align: 'center',
      width: '140px',
      render: (text, record) => {
        return (
          <Tooltip title={record.loginMessage}>
            <div style={{ width: '200px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
              {record.loginMessage}
            </div>
          </Tooltip>
        )
      },
    },
    {
      title: <span style={fatherTableTitleStyle}>操作时间</span>,
      dataIndex: 'operationTime',
      key: 'operationTime',
      align: 'center',
    },
    {
      title: <span style={fatherTableTitleStyle}>IP</span>,
      dataIndex: 'ipAddress',
      key: 'ipAddress',
      align: 'center',
    },
  ]
  // 父表格的loading
  const [loading, setLoading] = useState(false)
  // 父表格的pagination
  const [pagination, setPagination] = useState({
    page: 1,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'],
    total: 0,
    showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`,
  })
  // 父表格的数据源
  const [dataSource, setDataSource] = useState([])

  useEffect(() => {
    initData()
  }, [])

  const initData = () => {
    const startTime = moment().startOf('month')
    const endTime = moment().endOf('month')
    props.form.setFieldsValue({
      checkTime: [startTime, endTime],
    })
    fetchFatherTableData(startTime.format('YYYY-MM-DD 00:00:00'), endTime.format('YYYY-MM-DD 23:59:59'))
  }

  const fetchFatherTableData = (operationBeginTime: string, operationEndTime: string, paramsMerge?: any) => {
    const params = {
      page: pagination.page,
      size: pagination.pageSize,
      conditions: {
        operationBeginTime,
        operationEndTime,
      },
    }
    if (paramsMerge) {
      params.page = paramsMerge.current
      params.size = paramsMerge.pageSize
    }
    setLoading(true)
    http.post(apis.getOperationLogList, params).then(({ data }: any) => {
      setLoading(false)
      setDataSource(data.content)
      setPagination({
        page: params.page,
        current: params.page,
        pageSize: params.size,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'],
        total: data.totalElements,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`,
      })
    })
  }
  const onSubmit = (e: any) => {
    e.preventDefault()
    const newPagination = {
      ...pagination,
      current: 1,
      page: 1,
    }
    setPagination(newPagination)
    getParamsQueryData(newPagination)
  }

  const getParamsQueryData = (params?: any) => {
    const { checkTime } = props.form.getFieldsValue()
    fetchFatherTableData(checkTime[0].format('YYYY-MM-DD 00:00:00'), checkTime[1].format('YYYY-MM-DD 23:59:59'), params)
  }

  const { getFieldDecorator } = props.form

  return (
    <React.Fragment>
      {/* <div className="DailyRecordControl-title">操作日志</div> */}
      <Form
        onSubmit={onSubmit}
        layout="inline"
        style={{
          margin: '20px 0',
        }}
      >
        <Form.Item label="操作时间" labelAlign="left">
          {getFieldDecorator('checkTime', {})(<RangePicker allowClear={false}  style={{ width: '240px' }} />)}
        </Form.Item>
        <Form.Item labelAlign="left">
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item labelAlign="left">
          <Button type="primary" onClick={initData}>
            重置
          </Button>
        </Form.Item>
      </Form>
      {/* 父表格 */}
      <Spin spinning={loading}>
        <Table
          // 父table的columns
          columns={columns as any}
          // 父table的pagination
          pagination={pagination}
          // 父table的数据源
          rowKey="id"
          dataSource={dataSource}
          // 父table的onChange事件
          onChange={pageOptions => {
            setPagination({
              ...pagination,
              pageSize: pageOptions.pageSize,
              current: pageOptions.current,
              page: pageOptions.current,
            })
            getParamsQueryData(pageOptions)
          }}
          // 父table的展开行触发的事件
        />
      </Spin>
    </React.Fragment>
  )
}
export default Form.create()(DailyRecordControl)
